<script setup lang="ts">
import GIcon from './components/icon/Index.vue'
</script>

<template>
  <div class="container">
    <h2>Icon 图标</h2>
    
    <section>
      <h3>基础用法</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="home" />
          <span>home</span>
        </div>
        <div class="demo-item">
          <g-icon name="bi:person-fill" />
          <span>account</span>
        </div>
        <div class="demo-item">
          <g-icon name="settings" />
          <span>settings</span>
        </div>
        <div class="demo-item">
          <g-icon name="bell" />
          <span>bell</span>
        </div>
      </div>
    </section>

    <section>
      <h3>社交图标</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="github" size="24" />
          <span>github</span>
        </div>
        <div class="demo-item">
          <g-icon name="twitter" size="24" color="#1DA1F2" />
          <span>twitter</span>
        </div>
        <div class="demo-item">
          <g-icon name="instagram" size="24" color="#E4405F" />
          <span>instagram</span>
        </div>
        <div class="demo-item">
          <g-icon name="linkedin" size="24" color="#0A66C2" />
          <span>linkedin</span>
        </div>
      </div>
    </section>

    <section>
      <h3>图标颜色</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="heart" color="#ff4d4f" />
          <span class="color-label">#ff4d4f</span>
        </div>
        <div class="demo-item">
          <g-icon name="star" color="#faad14" />
          <span class="color-label">#faad14</span>
        </div>
        <div class="demo-item">
          <g-icon name="check-circle" color="#52c41a" />
          <span class="color-label">#52c41a</span>
        </div>
        <div class="demo-item">
          <g-icon name="info-circle" color="#1890ff" />
          <span class="color-label">#1890ff</span>
        </div>
      </div>
    </section>

    <section>
      <h3>图标大小</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="home" size="16" />
          <span>16px</span>
        </div>
        <div class="demo-item">
          <g-icon name="home" size="24" />
          <span>24px</span>
        </div>
        <div class="demo-item">
          <g-icon name="home" size="32" />
          <span>32px</span>
        </div>
        <div class="demo-item">
          <g-icon name="home" size="48" />
          <span>48px</span>
        </div>
      </div>
    </section>

    <section>
      <h3>图标旋转</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="arrow-right" rotate="45" />
          <span>45°</span>
        </div>
        <div class="demo-item">
          <g-icon name="arrow-right" rotate="120" />
          <span>120°</span>
        </div>
        <div class="demo-item">
          <g-icon name="arrow-right" rotate="270" />
          <span>270°</span>
        </div>
      </div>
    </section>

    <section>
      <h3>图标翻转</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="arrow-right" flip="h" />
          <span>水平翻转</span>
        </div>
        <div class="demo-item">
          <g-icon name="arrow-up" flip="v" />
          <span>垂直翻转</span>
        </div>
        <div class="demo-item">
          <g-icon name="arrow-right" flip="both" />
          <span>双向翻转</span>
        </div>
      </div>
    </section>

    <section>
      <h3>动画效果</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="loading" spin />
          <span>默认速度</span>
        </div>
        <div class="demo-item">
          <g-icon name="refresh" spin :speed="2" />
          <span>2倍速</span>
        </div>
        <div class="demo-item">
          <g-icon name="sync" spin :speed="0.5" />
          <span>0.5倍速</span>
        </div>
      </div>
    </section>

    <section>
      <h3>组合使用</h3>
      <div class="demo-row">
        <div class="demo-item">
          <g-icon name="arrow-right" rotate="45" color="#1890ff" size="32" />
          <span>旋转+颜色+大小</span>
        </div>
        <div class="demo-item">
          <g-icon name="sync" spin :speed="1.5" color="#52c41a" size="32" />
          <span>动画+颜色+大小</span>
        </div>
        <div class="demo-item">
          <g-icon name="arrow-right" flip="h" rotate="90" color="#ff4d4f" size="32" />
          <span>翻转+旋转+颜色+大小</span>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  color: #2c3e50;
}

section {
  margin-bottom: 3rem;

  &:last-child {
    margin-bottom: 0;
  }
}

h3 {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #2c3e50;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.5rem;
  background: #f5f7fa;
  border-radius: 8px;
}

.demo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  span {
    font-size: 14px;
    color: #666;
  }

  .color-label {
    font-family: monospace;
  }
}

:deep(svg) {
  font-size: 24px;
}
</style>
